<!--
 * @Date: 2023-03-10 10:36:18
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-04-10 15:32:57
 * @FilePath: \A19\frontend\src\components\Test\Judge.vue
-->
<template>
    <div class="list-container">
        <div class="head">
            批阅{{ examOrHomework === 'exam'?'考试':'作业' }}
        </div>
        <div style="height: calc(100% - 60px);">
            <el-table :data="filterTableData" style="width: 100%;height: calc(100% - 60px);">
                <el-table-column type="index" width="50" />
                <el-table-column prop="name" label="姓名" sortable >
                    <template #default="scope">
                        {{ scope.row.student.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="学号" sortable >
                    <template #default="scope">
                        {{scope.row.student.number  }}
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="分数" sortable >
                    <template #default="scope">
                        {{ paperFinded(scope.row.student)?.score || 0 }}
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="状态" sortable >
                    
                    <template #default="scope">
                        <span :style="{color:paperFinded(scope.row.student)?'#67C23A':'#F56C6C'}">{{ paperFinded(scope.row.student)?'已提交':'未提交' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="操作">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="姓名、学号" />
                    </template>
                    <template #default="scope">
                        <ElButton :disabled="!Boolean(paperFinded(scope.row.student))" @click="judgePaper(scope.row.student as users)"  link type="primary" size="small">批阅</ElButton>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { questions } from "@/shared/types/Question";
import { onMounted, ref, reactive,computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useClientStore } from '../../pinia/stores/client';
import { users } from '../../shared/types/user';
import { studentAnswer } from "@/shared/types/Answer";

const route = useRoute()
const router = useRouter()
const examOrHomework = ref<'exam' | 'homework'>((route.name as 'judge' | 'judgeHomework') === 'judge'?'exam':'homework')
const {client,currentCourseId} = storeToRefs(useClientStore())
const testId= route.params.testId as string
const testInfo = ref<{
    _id: string,
    course: string,
    startTime: Date,
    endTime: Date,
    name: string,
    status: "saved" | "published"
    questions:Array<questions>
}>()
const students = reactive(new Array<{
    _id:string,
    student:users,
    course:string
}>())

const papers = reactive(new Array<{
    _id: string
    student: string
    test: string
    submitTime: Date
    answers: Array<studentAnswer>
    score:number
    studentInfo: {
      _id: string;
      name: string;
      password?: string;
      role: string;
      email: string;
      school: string;
      number: string;
      gender: number;
      portrait: string;
    }[];
  }>())
const paperFinded = (stu:users) => {
    // return tests.find((t:any) => t.test === testId)
    // console.log(stu);
    // console.log(papers);
    return papers.find(p => p.student === stu._id)
}
const search = ref('')
const filterTableData = computed(() =>
    students.filter((data) =>{
        return !search.value || data.student.name.toLowerCase().includes(search.value.toLowerCase()) || data.student.number.toLowerCase().includes(search.value.toLowerCase())
    })
)

const judgePaper = (stu:users) =>{
    if(examOrHomework.value === 'exam'){
        router.push({
            name:'judgePaper',
            params:{
                testId
            },
            query:{
                student:stu._id
            }
        })
    }
    else{
        router.push({
            name:'judgeHomeworkPaper',
            params:{
                testId
            },
            query:{
                student:stu._id
            }
        })
    }
}

let loadingInstance:any
onMounted(async () =>{
    loadingInstance = ElLoading.service({
        target:'#app'
    })
    const ret = await client.value.callApi('Get/GetTestQuestions',{
        examOrHomework:examOrHomework.value,
        test:testId
    })
    if(ret.isSucc){
        testInfo.value = ret.res.test[0]
        currentCourseId.value = testInfo.value.course
    }
    
    const ret2 = await client.value.callApi('Get/GetUserTest',{
        examOrHomework:examOrHomework.value,
        testId,
        // courseId:currentCourseId.value
    })
    if(ret2.isSucc){
        console.log(ret2);
        papers.push(...ret2.res.tests)
    }

    const ret3 = await client.value.callApi('Get/GetCourseStus',{
        course:currentCourseId.value
    })
    if(ret3.isSucc){
        students.push(...ret3.res.stus.map(s => {
            return {
                ...s,
                student:s.student[0]
            }
        }))
    }
    loadingInstance.close()
    
})
</script>

<style lang="less" scoped>

</style>